<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内置指令</title>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="stylesheet" type="text/css" href="CSS/bbc.css" />
</head>
<body>
    <div id="app" v-cloak>
        {{message}}
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'我想喝奶茶'
            }
        })
    </script>

    <div id="app-1">
        <span v-once>{{message}}</span>
        <div v-once><span>{{message}}</span></div>
    </div>
    <script>
        var app1 = new Vue({
            el:'#app-1',
            data:{
                message:'凤梨酥'
            }
        })
    </script>

    <!-- 条件渲染指令 -->
    <div id="app-2">
        <p v-if="status===1">当status为1时显示这一行</p>
        <p v-else-if="status===2">当status为2时显示这一行</p>
        <p v-else>否则显示这一行</p>
    </div>
    <script>
        var app2 = new Vue({
            el:'#app-2',
            data:{
                status:1
            }
        })
    </script>

    <div id="app-3">
        <template v-if="status===1">
            <p>a</p>
        </template>
    </div>
    <script>
        var app3 = new Vue({
            el:'#app-3',
            data:{
                status:1
            }
        })
    </script>

    <div id="app-4">
        <template v-if="type==='name'">
            <label>用户名：</label>
            <input placeholder="输入用户名" key="name-input">
        </template>
        <template v-else>
            <label>邮箱：</label>
            <input placeholder="输入邮箱" key="mail-input">
        </template>
        <button @click="handleToggleClick">切换输入类型</button>
    </div>
    <script>
        var app4 = new Vue({
            el:'#app-4',
            data:{
                type:'name'
            },
            methods:{
                handleToggleClick:function(){
                    this.type=this.type==='name'?'mail':'name'
                }
            }
        })
    </script>

    <!-- v-show -->
    <div id="app-5">
        <!-- 渲染结果：<p style="display: none;">当status为1时显示这一行</p> -->
        <p v-show="status===1">当status为1时显示这一行</p>
    </div>
    <script>
        var app5 = new Vue({
            el:'#app-5',
            data:{
                status:2
            }
        })
    </script>

    <!-- 列表渲染指令v-for -->
    <div id="app-6">
        <ul>
            <li v-for="(book,index) in books">{{index}}-{{book.name}}</li>
        </ul>
        (数组更新)输入app6.books.push({name:'xxx'})可添加
    </div>
    <script>
        var app6 = new Vue({
            el:'#app-6',
            data:{
                books:[
                    {name:'《Vue.js》'},
                    {name:'《ASP.NET MVC 5》'},
                    {name:'《JavaScript》'}
                ]
            }
        })
    </script>

    <div id="app-7">
        <ul>
            <template v-for="(fruit,index) in fruits">
                <li>{{index}}-水果：{{fruit.name}}</li>
                <li>颜色：{{fruit.colour}}</li>
                <li>价格：{{fruit.price}}</li>
            </template>
        </ul>
    </div>
    <script>
        var app7 = new Vue({
            el:'#app-7',
            data:{
                fruits:[
                    {
                        name:'Apple',
                        colour:'gules',
                        price:4
                    },
                    {
                        name:'Banana',
                        colour:'yellow',
                        price:3
                    },
                    {
                        name:'Blueberry',
                        colour:'blue',
                        price:9
                    }
                ]
            }
        })
    </script>

    <!-- 遍历对象的属性 -->
    <!-- 渲染后的结果：<div id="app-8"><span>小彭</span><span>女</span><span>18</span></div> -->
    <div id="app-8">
        <span v-for="value in user">{{value}}</span>
    </div>
    <script>
        var app8 = new Vue({
            el:'#app-8',
            data:{
                user:{
                    name:'小彭',
                    gender:'女',
                    age:18
                }
            }
        })
    </script>

    <div id="app-9">
        <ul>
            <li v-for="(value,key,index) in user">{{index}} - {{key}}: {{value}}</li>
        </ul>
    </div>
    <script>
        var app9 = new Vue({
            el:'#app-9',
            data:{
                user:{
                    name:'小彭',
                    gender:'女',
                    age:18
                }
            }
        })
    </script>

    <!-- v-for迭代整数 -->
    <div id="app-10">
        迭代整数<span v-for="n in 10">{{n}}  </span>
    </div>
    <script>
        var app10 = new Vue({
            el:'#app-10'
        })
    </script>

    <!-- 数组更新 -->
    <div id="app-11">
        <ul>
            <template v-for="fruit in sortFruits">
            <!-- <template v-for="fruit in filterFruits">（过滤） -->
                <li>水果：{{fruit.name}}</li>
                <li>颜色：{{fruit.colour}}</li>
                <li>价格：{{fruit.price}}</li>
            </template>
        </ul>
    </div>
    <script>
        var app11 = new Vue({
            el:'#app-11',
            data:{
                fruits:[
                    {
                        name:'Apple',
                        colour:'gules',
                        price:4
                    },
                    {
                        name:'Banana',
                        colour:'yellow',
                        price:3
                    },
                    {
                        name:'Blueberry',
                        colour:'blue',
                        price:9
                    },
                ]
            },
            computed:{
                //过滤
                // filterFruits:function(){
                //     return this.fruits.filter(function (fruits){
                //         return fruits.name.match(/Blueberry/);
                //     });
                // }
                //排序
                sortFruits:function(){
                    return this.fruits.sort(function(a,b){
                        return a.name.length <b.name.length;
                    })
                }
            }
        })
        //filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
        // app11.fruits = app11.fruits.filter(function(item){
        //     return item.name.match(/Banana/)
        // })
    </script>

    <script>
        //1.push()方法可以在数组的末属添加一个或多个元素
        //2.shift()方法把数组中的第一个元素删除
        //3.unshift()方法可以在数组的前端添加一个或多个元素
        //4.pop()方法把数组中的最后一个元素删除
        //5.filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
        //6.reverse() 方法用于颠倒数组中元素的顺序。
        //7.concat()返回一个新数组，数组合并，
        //8.splice(index,howmany,item1,…..,itemX)
        //删除元素，并向数组添加新元素。。index开始的下标，howmany删除多少个，item1…itemx为删除后插入的元素。
        //9.sort() 方法用于对数组的元素进行排序。
        //10.slice从某个已有的数组返回选定的元素
    </script>

    <!-- 方法与事件 -->
    <div id="app-12">
        点击次数：{{counter}}
        <button @click="counter++">+1</button>
    </div>
    <script>
        var app12 = new Vue({
            el:'#app-12',
            data:{
                counter:0
            }
        })
    </script>

    <div id="app-13">
        点击次数：{{counter}}
        <button @click="handleAdd()">+1</button>
        <button @click="handleAdd(10)">+ 10</button>
    </div>
    <script>
        var app13 = new Vue({
            el:'#app-13',
            data:{
                counter:0
            },
            methods:{
                handleAdd:function(count){
                    count = count || 1;
                    //this指向当前Vue实例App
                    this.counter += count;
                }
            }
        })
    </script>

    <div id="app-14">
        <a href="http://apple.com" @click="handleClick('禁止打开',$event)">打开链接</a>
    </div>
    <script>
        var app14 = new Vue({
            el:'#app-14',
            methods:{
                handleClick:function(message,event){
                    event.preventDefault();
                    window.alert(message);
                }
            }
        })
    </script>
</body>
</html>